<template>
  <view class="content">
    <qiun-data-charts type="map" canvas2d="" :chartData="chartData" :opts="opts" :inScrollView="true"
      :pageScrollTop="pageScrollTop" tooltipFormat="mapFormat" @getIndex="getIndex" @complete="complete" />
  </view>
</template>

<script>
import { onPageScroll } from '@dcloudio/uni-app'
import mockData from '../../mock/index'

export default {
  data() {
    return {
      // 地图配置
      opts: {
        padding: [0, 0, 0, 0],
        dataLabel: true,
        enableScroll: false,
        fontSize: 8,
        fontColor: '#fff',
        extra: {
          map: {
            border: true,
            mercator: true, // 是否进行WGS84转墨卡托投影(开启后可能会造成tooltip不跟手，建议自行转换)
            borderWidth: 1,
            borderColor: '#41D7FF',
            fillOpacity: 0.6,
            activeBorderColor: '#00BCFB',
            activeFillColor: '#00BCFB',
            activeFillOpacity: 1
          }
        }
      },
      // 地图数据
      chartData: {}, // 地图数据 目前只支持geojson格式
      layout: 'china', // 当前地图布局，china为中国地图，province为各省份地图
      pageScrollTop: 0 // 页面时候必须传入pageScrollTop，inScrollView传true，否则会导致地图某些事件不触发
    }
  },
  onLoad() {
    this.drawChina()
  },
  // 监听页面滚动
  onPageScroll(e) {
    this.pageScrollTop = e.scrollTop
  },
  computed: {
    // 当前地图层级mock数据
    currentMockData() {
      if (!mockData[this.layout]) {
        return []
      }
      return mockData[this.layout].features
    }
  },
  methods: {
    drawChina() {
      uni.setNavigationBarTitle({
        title: '中国地图'
      });
      setTimeout(() => {
        let series = mockData.china.features;
        // 这里循环一下series，把需要的数据增加到serie的属性中，fillOpacity是根据数据来显示的颜色层级透明度
        for (var i = 0; i < series.length; i++) {
          // 这里模拟了随机数据，实际开发中请根据实际情况修改
          series[i].value = Math.floor(Math.random() * 1000)
          series[i].fillOpacity = series[i].value / 1000
          series[i].color = "#0D9FD8"
        }
        this.chartData = {
          series: series
        };
      }, 100);
    },
    complete(e) {
      // 这里拿到了渲染完成事件
      // console.log(e);
      // 这里判断了是中国地图还是各省份的地图，根据需求自行修改
      if (this.layout !== 'china') {
        return;
      }
    },
    // 点击地图获取点击的索引
    getIndex(e) {
      console.log('点击地图', e);
      if (e.currentIndex > -1) {
        switch (this.layout) {
          case 'china':
            this.layout = 'province';
            break;
          case 'province':
            this.layout = 'city';
            break;
          case 'city':
            this.layout = 'area';
            break;
          default:
            uni.showModal({
              title: '提示',
              content: '当前已经是最后一级地图，点击空白回到中国地图',
              success: () => {

              }
            });
            break;
        }

        this.drawNext(e.currentIndex);
      } else {
        this.layout = 'china';
        this.drawChina();
      }
    },

    drawNext(idx) {
      uni.setNavigationBarTitle({
        title: '点空白返回中国地图'
      });

      let adcode;
      let series;

      if (this.currentMockData[idx]) {
        // 这里是根据点击的索引获取到对应的adcode，然后请求对应的地图数据
        adcode = this.currentMockData[idx].properties.adcode;
      } 
      series = this.currentMockData;

      // 模拟获取网络地图数据
      uni.request({
        url: 'localhost?adcode=' + adcode,//请更换为您的服务器地址
        complete: (res) => {
          // 根据adcode请求到对应的地图数据，这里仅用数据模拟
          for (var i = 0; i < series.length; i++) {
            series[i].value = Math.floor(Math.random() * 1000)
            series[i].fillOpacity = series[i].value / 1000
            series[i].color = "#0D9FD8"
          }
          setTimeout(() => {
            this.chartData = {
            series: series
          };
          }, 1000);
        }
      })
    }
  },

}
</script>

<style>
.content {
  width: 100vw;
  height: 100vw;
}

.points-box {
  position: absolute;
  width: 50px;
  height: 50px;
  color: #FFFFFF;
  font-size: 14px;
  text-align: center;
  background: url('../../static/point.png');
  cursor: pointer;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
